﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Content.Master" Inherits="System.Web.Mvc.ViewPage<MethodWorx.CMS.UI.Areas.Application.Models.TemplateModel>" %>
<%@ Import Namespace="MethodWorx.CMS.TemplateLanguage.Design" %>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
     <script language="javascript" src="<%=Url.Content("~/Scripts/CodeMirror/codemirror.js")%>"></script>
        
        <style type="text/css">
            * {font-size:1em }
	        #toolbar {
        		padding: 10px 4px;
        	}
        	
        	.tool
        	{
        	    border:1px solid transparent;
        	}
        	
        	.tool:hover
        	{
        	    border:1px solid #d8f0fa;
        	    background-color:#e7f4f9;
        	    cursor:pointer;
        	}
        	
        	#switch span
        	{
        	    margin-left:2px;
        	    padding:2px;
        	    border:1px solid silver;
        	    cursor:pointer;
        	    background-color:#cccccc;
        	}
        	
        	.tool li
        	{
        	    padding:2px;
        	}
        	
        	#switch span.selected
        	{
        	    background-color:White;
        	    margin-left:2px;
        	    padding:2px;
        	    border:1px solid silver;
        	    cursor:pointer;
        	}
        	
        	.propertyEditor
        	{
        	    border:none;
        	    width:80px;
        	    text-align:left;
        	}
        	
        	button.selector
        	{
        	    border:1px solid silver;
        	    font-size:smaller;
        	    padding:0px;
        	}
        
        	
        	.listItemGroup strong
        	{
        	    text-decoration:underline;
        	}
        	
            .listItemGroup div.listItem
        	{
        	    padding:2px 2px 2px 4px;
        	    cursor:pointer;
        	}
        	
        	.listItemGroup div.listItem:hover
        	{
        	    background-color:#AAAAFF;
        	}
        	
        	div.tool.selected
        	{
        	    background-color:#BEEBFF !important;
        	    border:1px solid #99DEFD !important;
        	}
	    
	    </style>
        
	<script type="text/javascript">

        $(document).click(function()
        {
            $("#documentPopup").remove();
            $(".tool").removeClass("selected");
            $(".insertoptions").slideUp();
            if(window.frames["previewFrame"].stopAddingParser != null)
                window.frames["previewFrame"].stopAddingParser();
        });


	    var parsers = new Array();
        <%foreach(var parser in this.Model.Parsers) { %>
            parsers.push("<%=parser.Name %>");
        <%} %>

        var selectedIndex;
        var selectedParser;
        function setProperties(index)
        {
            selectedIndex = index;
            $.getJSON("<%=Url.Content("~/Application")%>/Template/Properties", {  id: '<%=this.ViewData.Model.PageTemplate.Id %>', index:index },
            function(obj)
            {
                var html ="";
                for(var i = 0; i < obj.length; i ++)
                {
                    var p = obj[i];
                    html += 
                    "<tr>" + 
                        "<td style=\"border:1px solid #dddddd\">" + p.Name + "</td>" +  
                        "<td style=\"border:1px solid #dddddd\">" + getPropertyInput(p) + "</td>" + 
                    "</tr>"
                }
                $("#parserProperties").html(html);
                setupParserPropertyEvents();
            });
        }

        function getPropertyInput(p)
        {
        
            if(p.AttributeType == "UnitPropertyAttribute")
            {
                return "<input type=\"text\" name=\"" + p.Name + "\" class=\"propertyEditor\" value=\"" + p.Value +  "\" />px";
            }
            else if(p.AttributeType == "ContentTemplatePropertyAttribute")
            {
                return "<table><tr><td><input type=\"text\" name=\"" + p.Name + "\" class=\"propertyEditor\" value=\"" + p.Value +  "\" /></td><td><button class=\"contentTemplateSelector selector\">...</button></td></table>";
            }
            else if(p.AttributeType == "ContentTemplatePropertyPropertyAttribute")
            {
                return "<table><tr><td><input type=\"text\" name=\"" + p.Name + "\" class=\"propertyEditor\" value=\"" + p.Value +  "\" /></td><td><button class=\"contentTemplatePropertySelector selector\">...</button></td></table>";
            }
            else if(p.AttributeType == "PageTemplatePropertyAttribute")
            {
                return "<table><tr><td><input type=\"text\" name=\"" + p.Name + "\" class=\"propertyEditor\" value=\"" + p.Value +  "\" /></td><td><button class=\"pageTemplateSelector selector\">...</button></td></table>";
            }
            else if(p.AttributeType == "PageTemplatePropertyPropertyAttribute")
            {
                return "<table><tr><td><input type=\"text\" name=\"" + p.Name + "\" class=\"propertyEditor\" value=\"" + p.Value +  "\" /></td><td><button class=\"pageTemplatePropertySelector selector\">...</button></td></table>";
            }
            else
            {
                switch(p.PropertyType)
                {   
                    case "Boolean":
                        return "<input type=\"checkbox\" name=\"" + p.Name + "\" class=\"propertyEditor\" " + (p.Value == true ? "checked" : "") + " />";
                        break;
                    default:
                        return "<input type=\"text\" name=\"" + p.Name + "\" class=\"propertyEditor\" value=\"" + p.Value +  "\" />";
                        break;
                }
            }
        }

        function refreshCode()
        {
            getCode($("#templates").val());
        }

        function setupParserPropertyEvents()
        {
            $(".propertyEditor[type='text']").change(function()
            {
                var name = $(this).attr("name");
                var val = $(this).val();
                
                 $.getJSON("<%=Url.Content("~/Application")%>/Template/SetParserProperty", {  id:  '<%=this.ViewData.Model.PageTemplate.Id %>', index: selectedIndex, name: name, value: val },
                        function (obj) 
                        {
                        
                           if(!obj.Changed)
                           {
                            //  force a refresh
                                window.frames["previewFrame"].location.href = window.frames["previewFrame"].location.href;
                           }
                           else
                           {
                            //  otherwise, sort out the item
                                window.frames["previewFrame"].updateParserContents(obj.Content);
                           }
                           getCode($("#templates").val());
                            
                        });
            });


            $(".propertyEditor[type='checkbox']").change(function()
            {
            
                var name = $(this).attr("name");
                var val = $(this).attr("checked");
                
                 $.getJSON("<%=Url.Content("~/Application")%>/Template/SetParserProperty", { id:  '<%=this.ViewData.Model.PageTemplate.Id %>', index: selectedIndex, name: name, value: val },
                        function (obj) 
                        {
                        
                           if(!obj.Changed)
                           {
                            //  force a refresh
                                window.frames["previewFrame"].location.href = window.frames["previewFrame"].location.href;
                           }
                           else
                           {
                            //  otherwise, sort out the item
                                window.frames["previewFrame"].updateParserContents(obj.Content);
                           }
                           getCode($("#templates").val());
                            
                        });
            });

            $(".contentTemplateSelector").click(function()
            {
                var me = this;
                var tb = $(this).parent().parent().children().first().children().first();
                $.getJSON("<%=Url.Content("~/Application")%>/TemplateProperty/GetChildContentTemplates", { id: '<%=this.ViewData.Model.PageTemplate.Id %>' },
                function(obj)
                {
                    var html = "<div class=\"listItemGroup\"><strong>Related</strong>";
                    var foundRelated = false;
                    for(var i =0; i < obj.length; i++)
                    {
                        if(obj[i].Related)
                        {
                            html += "<div class=\"listItem\">" + obj[i].Name + "</div>";  
                            foundRelated = true; 
                        }
                    }
                   
                    if(foundRelated)
                        html += "</div><div class=\"listItemGroup\"><strong>All</strong>";
                    else
                        html = "<div class=\"listItemGroup\"><strong>All</strong>";
                    for(var i =0; i < obj.length; i++)
                    {
                        if(!obj[i].Related)
                            html += "<div class=\"listItem\">" + obj[i].Name + "</div>";    
                    }
                    html += "</div>";
                    $(tb).after("<div id=\"documentPopup\" style=\"position:absolute;border:1px solid silver;background-color:white;width:120px;height:100px;overflow:auto;padding:1px;\">" + html + "</div>");

                    $("#documentPopup div.listItem").click(function()
                    {
                        tb.val($(this).text());
                        tb.change();
                    });
                });
            });

            $(".contentTemplatePropertySelector").click(function()
            {
                var me = this;
                var tb = $(this).parent().parent().children().first().children().first();
                var name = tb.attr("name");
                $.getJSON("<%=Url.Content("~/Application")%>/TemplateProperty/GetContentTemplateProperties", { id: '<%=this.ViewData.Model.PageTemplate.Id %>', index: selectedIndex, name: name },
                function(obj)
                {
                    html = "<div class=\"listItemGroup\"><strong>Properties:</strong>";
                    for(var i =0; i < obj.length; i++)
                    {
                        if(!obj[i].Related)
                            html += "<div class=\"listItem\">" + obj[i].Name + "</div>";    
                    }
                    html += "</div>";
                    $(tb).after("<div id=\"documentPopup\" style=\"position:absolute;border:1px solid silver;background-color:white;width:120px;height:100px;overflow:auto;padding:1px;\">" + html + "</div>");

                    $("#documentPopup div.listItem").click(function()
                    {
                        tb.val($(this).text());
                        tb.change();
                    });
                });
            });
            
            $(".pageTemplateSelector").click(function()
            {
                var me = this;
                var tb = $(this).parent().parent().children().first().children().first();
                $.getJSON("<%=Url.Content("~/Application")%>/TemplateProperty/GetChildPageTemplates", { id: '<%=this.ViewData.Model.PageTemplate.Id %>' },
                function(obj)
                {
                    var html = "<div class=\"listItemGroup\"><strong>Related</strong>";
                    var foundRelated = false;
                    for(var i =0; i < obj.length; i++)
                    {
                        if(obj[i].Related)
                        {
                            html += "<div class=\"listItem\">" + obj[i].Name + "</div>";  
                            foundRelated = true; 
                        }
                    }
                   
                    if(foundRelated)
                        html += "</div><div class=\"listItemGroup\"><strong>All</strong>";
                    else
                        html = "<div class=\"listItemGroup\"><strong>All</strong>";
                    for(var i =0; i < obj.length; i++)
                    {
                        if(!obj[i].Related)
                            html += "<div class=\"listItem\">" + obj[i].Name + "</div>";    
                    }
                    html += "</div>";
                    $(tb).after("<div id=\"documentPopup\" style=\"position:absolute;border:1px solid silver;background-color:white;width:120px;height:100px;overflow:auto;padding:1px;\">" + html + "</div>");

                    $("#documentPopup div.listItem").click(function()
                    {
                        tb.val($(this).text());
                        tb.change();
                    });
                });
            });

            $(".pageTemplatePropertySelector").click(function()
            {
                var me = this;
                var tb = $(this).parent().parent().children().first().children().first();
                var name = tb.attr("name");
                $.getJSON("<%=Url.Content("~/Application")%>/TemplateProperty/GetPageTemplateProperties", { id: '<%=this.ViewData.Model.PageTemplate.Id %>', index: selectedIndex, name: name },
                function(obj)
                {
                    html = "<div class=\"listItemGroup\"><strong>Properties:</strong>";
                    for(var i =0; i < obj.length; i++)
                    {
                        if(!obj[i].Related)
                            html += "<div class=\"listItem\">" + obj[i].Name + "</div>";    
                    }
                    html += "</div>";
                    $(tb).after("<div id=\"documentPopup\" style=\"position:absolute;border:1px solid silver;background-color:white;width:120px;height:100px;overflow:auto;padding:1px;\">" + html + "</div>");

                    $("#documentPopup div.listItem").click(function()
                    {
                        tb.val($(this).text());
                        tb.change();
                    });
                });
            });
        }
        
        function selectTemplate()
        {
            save(function()
            {
                getCode($("#templates").val());
            });
        }

        function getCode(id)
        {
         $.getJSON("<%=Url.Content("~/Application")%>/Template/Get", { id: id },
                        function (obj) {
                            loaded = $("#templates").val();
                            editor.setCode(obj.Code);
                        });
        }

        function getAddingParser()
        {
            return $("div.tool.selected").attr("name");
        }

	    $(function () {

            $("#toolsContainer" ).accordion({ fillSpace: true });

            $(".content").css("margin", "0px");
            $(".ui-accordion-content").css("padding", "5px");

            var buttons = new Array();
	        buttons.push({ text: 'Save', hasText: false, id: 'save', icon: '<%=Url.Content("~/images/icons/disk.png")%>' });
            buttons.push({ text: 'Template', type: 'label' });
            buttons.push({ text: 'Template', id: "templates", change: function() { selectTemplate() }, options: 
            [
            <%foreach(var t in this.Model.Templates) {%>
                { value: "<%=t.Id %>", text: "<%=t.Name %>"}<%=(t != this.Model.Templates.Last()) ? "," : "" %>
            <%} %>
            ]});
            buttons.push({ text: 'Edit in New Window', hasText: false, id: 'newWindow', icon: '<%=Url.Content("~/images/icons/windows.gif")%>' });
            MethodWorx.CMS.Toolbar.setButtons(buttons, "#toolbar");

            buttons = new Array();
            buttons.push({ text: 'Url Picker', hasText: false, id: 'urlPickerButton', icon: '<%=Url.Content("~/images/icons/link_go.png")%>' });
            <%if(this.Model.Placeholders.Count() > 0){ %>
            buttons.push({ text: "Placeholder", id: "placeholders", options:
            [
                <%foreach(var t in this.Model.Placeholders){ %>
                    {value: "<%=t %>", text: "<%=t %>" }<%=(t != this.Model.Placeholders.Last()) ? "," : "" %>
                <%} %>
            ]});
            buttons.push({ text: 'Insert Placeholder', hasText: false, id: 'placeholderButton', icon: '<%=Url.Content("~/images/icons/page_red.png")%>' });
            <%} %>

            buttons.push({ text: 'Make Page Property', hasText: false, id: 'makePropertyButton', icon: '<%=Url.Content("~/images/icons/html_go.png")%>' });
            buttons.push({ text: 'Delete', hasText: false, id: 'deleteSelected', icon: '<%=Url.Content("~/images/icons/cross.png")%>' });
            MethodWorx.CMS.Toolbar.setButtons(buttons);
            $("#urlPickerButton").click(function()
            {
                showUrlPicker();
            });

            $(".content").height($(window).height() - 40);

            $("#markupButton").click(function()
            {
            mode = "markup";
                $("#container").show();
                $("#preview").hide();
                $("#errors").hide();

                $("#switch span").removeClass("selected");
                $("#markupButton").addClass("selected");
            });
            $("#designerButton").click(function()
            {
                save(function()
                {
                    window.frames["previewFrame"].location.href = "<%=Url.Content("~/Application")%>/Template/Preview/<%=this.Model.Id %>";
                    mode = "designer";
                    $("#container").hide();
                    $("#preview").show();
                    $("#errors").hide();
                    $("#switch span").removeClass("selected");
                    $("#designerButton").addClass("selected");
                }, true);
            });

            $("#makePropertyButton").click(function()
            {
                //  has the desgner been loaded yet?
                if(window.frames["previewFrame"].getHighlighted != null)
                {   
                    var e = window.frames["previewFrame"].getHighlighted();
                    if(e != null)
                    {
                        $.getJSON("<%=Url.Content("~/Application")%>/Template/CanMakePageProperty/<%=this.Model.Id %>?pi=" + e, function(obj)
                        {
                            if(obj.Success && obj.CanMakePageProperty)
                            {
                                window.parent.parent.openDialog("<%=Url.Content("~/Application")%>/Template/MakePageProperty/<%=this.Model.Id %>?pi=" + e, "Make Page Property");
                            }
                            else
                                alert(obj.Message);
                        });
                    }
                    else
                        alert("Please select a standard HTML element from the page below to convert to a page property")
                }
            });

            $("#errorsButton").click(function()
            {
                  save(function()
                {
                    window.frames["previewFrame"].location.href = "<%=Url.Content("~/Application")%>/Template/Preview/<%=this.Model.Id %>";
                    mode = "errors";
                    $("#container").hide();
                    $("#preview").hide();
                    $("#errors").show();
                    $("#switch span").removeClass("selected");
                    $("#errorsButton").addClass("selected");
                }, true);
            });

            $("#placeholderButton").click(function()
            {
                if($("#placeholders").val() != "" && $("#placeholders").val() != null)
                {
                    editor.replaceSelection("<placeholder type=\"content\" name=\"" + $("#placeholders").val() + "\">\r\n</placeholder>");
                }
            });

            $("#newWindow").click(function () {
            window.open(window.location.href);
            });

	    });
        var loaded;
        var mode = "markup";
        function save(onsuccess, temp)
        {
            if(mode == "markup")
            {
                if(temp)
                {
                    var code = editor.getCode();
                    MethodWorx.CMS.showPleaseWait();
	                $.post("<%=Url.Content("~/Application")%>/Template/SaveTemp", { id:loaded, code: code },
                        function (obj) {
                            MethodWorx.CMS.hidePleaseWait();
                            //alert(obj.success);
                            if(obj.success && onsuccess != null)
                                onsuccess();
                            else if(!obj.success)
                            {
                                alert(obj.message);
                            }
                            }
                        , "json");          
                }
                else
                {
                    var code = editor.getCode();
                    MethodWorx.CMS.showPleaseWait();
	                $.post("<%=Url.Content("~/Application")%>/Template/Save", { id:loaded, code: code },
                        function (obj) {
                          MethodWorx.CMS.hidePleaseWait();
                            //alert(obj.success);
                            if(obj.success && onsuccess != null)
                                onsuccess();
                            else  if(!obj.success)
                            {
                                alert(obj.message);
                            }     

                        }, "json");          
                }
            }
            else
            {
                MethodWorx.CMS.showPleaseWait();
                $.getJSON("<%=Url.Content("~/Application")%>/Template/SaveFromDesigner", { id: '<%=this.ViewData.Model.PageTemplate.Id %>' }, MethodWorx.CMS.hidePleaseWait, MethodWorx.CMS.hidePleaseWait);
            }
        }

	    $(document).ready(function () {
            resize();
	        $("#save").click(function () {
	            save();
	        });
	        $("#openNewWindow").click(function () {
	            window.open(window.location.href, "codeEditor");
	        });

            $(window).resize(function()
            {
                resize();
            });
	    });	    

        function resize()
        {
            $("#container").css("top", "0");
            $("#container").css("left", "0");
            $("#container").height(($(window).height() - 57));
            $("#container").width($(window).width() - 210);

            $("#preview").css("top", "0");
            $("#preview").css("left", "0");
            $("#preview").height(($(window).height() - 57));
            $("#preview").width($(window).width() - 210);


            $("#errors").css("top", "0");
            $("#errors").css("left", "0");
            $("#errors").height(($(window).height() - 57));
            $("#errors").width($(window).width() - 210);

            $("#tools").css("left", ($(window).width() - 210));
            $("#tools").css("top", 39);
            $("#tools").height(($(window).height() - 52));
            $("#tools").width(196);

            $( "#toolsContainer" ).accordion( "resize" );

        }

	 
    </script>
        
        <div style="position:absolute;width:200px;height:125px;background-color:White;border:1px solid silver;z-index:9999999;display:none" id="autocomplete">
            <select size="10" style="height:100%;width:100%;border:none;font-size:8pt;font-family:Tahoma;line-height:2px" id="intellisense">
                  <%foreach(var parser in this.Model.Parsers.OrderBy(s => s.Namespace + ":" + s.Name)) { %>
                        <option><%:parser.Namespace%>:<%:parser.Name %></option>
                    <%} %>
            </select>
        </div>

        

        <div style="position:absolute;width:290px;height:15px;background-color:InfoBackground;border:1px solid silver;z-index:9999999;display:none;padding:5px" id="parserInfo">
        </div>

        

        <table style="width:100%;height:100%;" id="container">
        <tr style="height:100%">
            <td style="border: 1px solid silver;height:100%;">
                <textarea id="code" cols="120" rows="30" style="border: 1px solid silver" name="code">
            </textarea>
            </td>
        </tr>
    </table>
    
    <script language="javascript">
        var intellisenseVisible = false;
        var parserInfoVisible = false;
        var lastIntellisense = "";
        var intellisenseParserName = "";

        var editor = new CodeMirror(CodeMirror.replace("code"), {
            path: "<%=Url.Content("~/scripts/codemirror")%>/",
            height: "100%",
            parserfile: "parsexml.js",
            stylesheet: "<%=Url.Content("~/css/codemirror/xmlcolors.css")%>",
            initCallback: function () {
                $.getJSON("<%=Url.Content("~/Application")%>/Template/Get", { id: '<%=this.ViewData.Model.Id %>' },
                    function (obj) {
                        loaded = '<%=this.ViewData.Model.Id %>';
                        editor.setCode(obj.Code);
                    });
                $(editor.win).click(function () {
                    intellisenseVisible = false;
                    $("#autocomplete").hide();
                    $("#parserInfo").hide();
                    $("#urlPicker").hide();
                    
                });
                editor.grabKeys(function (e) {
                },
                function (keyCode, e) {
                    if (e.type == "keydown") {
                        if (!intellisenseVisible && e.altKey == true && e.keyCode == 85) {
                            //
                            //  insert a URL
                            showUrlPicker();
                        }
                        else if (intellisenseVisible) {

                            if (keyCode == 40) {
                                if ($("#intellisense option:selected").next().length > 0)
                                    $("#intellisense").val($("#intellisense option:selected").next().text());
                                return true;
                            }
                            if (keyCode == 38) {
                                if ($("#intellisense option:selected").prev().length > 0)
                                    $("#intellisense").val($("#intellisense option:selected").prev().text());
                                return true;
                            }
                            else if (keyCode == 13) {
                                if($("#intellisense").val() != null)
                                {
                                    editor.cursorPosition(false).node.innerHTML = $("#intellisense").val() + " ";
                                }
                                return true;
                            }
                        }
                    }
                    window.setTimeout(function () {
                        var p = editor.cursorCoords();
                        $("#autocomplete").css("left", p.x);
                        $("#autocomplete").css("top", p.y + 15);
                        $("#parserInfo").css("left", p.x);
                        $("#parserInfo").css("top", p.y + 15);

                        var node = editor.cursorPosition(false).node;
                        if (node != null && node.className == "xml-tagname") {
                            var t = node.innerHTML;
                            if (t.endsWith(" ")) {
                                $("#autocomplete").hide();
                                //$("#parserInfo").height("15px");
                                getParserParameters($.trim(t), "");
                                $("#parserInfo").show();
                                intellisenseVisible = false;
                                parserInfoVisible = true;
                                intellisenseParserName = $.trim(t);
                                locateParserInIntellisense($.trim(t));
                            }
                            else {
                                $("#autocomplete").show();
                                $("#parserInfo").hide();
                                intellisenseVisible = true;
                                parserInfoVisible = false;
                                locateParserInIntellisense($.trim(t));
                            }
                        }
                        else if (node != null && (node.className == "xml-attname" || node.className == "xml-attribute")) {
                            var t = node.innerHTML;
                            intellisenseVisible = false;
                            parserInfoVisible = false;
                            $("#autocomplete").hide();
                            getParserParameters(intellisenseParserName, $.trim(t));
                        }
                        else {
                            intellisenseVisible = false;
                            parserInfoVisible = false;
                            $("#parserInfo").hide();
                            $("#autocomplete").hide();
                            lastParserShown = "";
                        }

                        return false;
                    }, 500);
                });
            }
        });

        function getParserInfo(parser)
        {
            if(!parserInfoVisible)
            {
                    $.getJSON("<%=Url.Content("~/Application")%> %>/Template/GetParserInfo", { parser:parser, },
                        function (obj) {
                            $("#parserInfo").text(obj.Description);
                        });
            }
        }

        var lastParserShown = "";
        function getParserParameters(name, attr) 
        {
            if(lastParserShown != name)
            {
                lastParserShown = name
                $.getJSON("<%=Url.Content("~/Application")%>/Template/GetParserParameters", { parser: name, parameter: attr },
                        function (obj) {
                            //$("#parserInfo").text(obj.Description);
                            if(obj.success)
                            {
                                var html = "<p>" + obj.parserDescription + ":</p>";
                                var l = obj.parserDescription.length;
                                for(var i in obj.found)
                                {
                                    if(obj.found[i].Description == null)
                                        html += "<strong>" + obj.found[i].Name + "</strong><br/>";
                                    else
                                        html += "<strong>" + obj.found[i].Name + "</strong> - " + obj.found[i].Description + "<br/>";

                                    if((obj.found[i].Name + " - " + obj.found[i].Description).length > l)
                                        l = (obj.found[i].Name + " - " + obj.found[i].Description).length;

                                }
                                $("#parserInfo").height(35 + (obj.found.length * 15) + "px");
                                $("#parserInfo").width(30 + (l * 6) + "px");
                                $("#parserInfo").html(html);
    
                                $("#parserInfo").show();
                                $("#autocomplete").hide();
                            }
    
                        });
            }
        }

        

        function locateParserInIntellisense(t) {
            if (lastIntellisense != t) {
                lastIntellisense = t;
                if (!$("#intellisense option:selected").text().toLowerCase().startsWith(t.toLowerCase())) {
                    $("#intellisense").val("");
                    var found = false;
                    $("#intellisense option").each(function (i) {
                        if (!found) {
                            if ($(this).text().toLowerCase().startsWith(t.toLowerCase())) {
                                $("#intellisense").val($(this).text());
                                found = true;
                            }
                        }

                    });
                }
            }
        }

        $(document).ready(function () {
            $(".tool").click(function (e) {
                //window.frames["previewFrame"].updateParserContents(obj.Content);
                //alert($(this).attr("name"));
                $(".tool").removeClass("selected");
                $(this).addClass("selected");
                $(this).children("div").children("ul").slideDown();
                //window.frames["previewFrame"].addParser($(this).attr("name"));
                e.preventDefault();
                e.stopPropagation();
            });

            $(".tool").dblclick(function () {
                window.frames["previewFrame"].replaceHighlighedWithParser($(this).attr("name"), '<%=this.ViewData.Model.PageTemplate.Id %>', '');
            });

            $(".initializer").click(function () {
                window.frames["previewFrame"].replaceHighlighedWithParser($(this).attr("parser"), '<%=this.ViewData.Model.PageTemplate.Id %>', $(this).text());
            });

            $("#deleteSelected").click(function () {
                window.frames["previewFrame"].deleteHighlighted('<%=this.ViewData.Model.PageTemplate.Id %>');
            });

            $("*").disableSelection();
        });

        function insertParser(index, parser, position) {
            $.getJSON("<%=Url.Content("~/Application")%>/Template/InsertParser", { id: '<%=this.ViewData.Model.PageTemplate.Id %>', index: selectedIndex, parser: parser, position: position, codeEditor: $("#templates").val() },
                        function (obj) {
                            //  otherwise, sort out the item
                            window.frames["previewFrame"].location.href =
                            window.frames["previewFrame"].location.href;
                            getCode($("#templates").val());
                        });
                    }


        function deleteParser(index) {
            $.getJSON("<%=Url.Content("~/Application")%>/Template/DeleteParser", { id:  '<%=this.ViewData.Model.PageTemplate.Id %>', index: index, codeEditor: $("#templates").val() },
            function (obj) {
                //  otherwise, sort out the item
                window.frames["previewFrame"].location.href =
                window.frames["previewFrame"].location.href;
                getCode($("#templates").val());
            });
        }


       
    </script>
    
     <table style="width:100%;height:100%;display:none;" id="preview">
        <tr style="height:100%">
            <td style="border: 1px solid silver;height:100%;">
                <iframe id="previewFrame" name="previewFrame" style="width:100%;height:100%;border:none"></iframe>
            </td>
        </tr>
    </table>
     <div style="width:100%;height:100%;display:none;border:1px solid silver" id="errors">
        <table>
        <thead>
            <tr>
                <td>Type</td>
                <td>Description</td>
                <td>Line</td>
            </tr>
        </thead>
        <tr>
            <td>error</td>
        </tr>
        </table>
    </div>
    <div id="switch">
        <span class="selected" id="markupButton">Markup</span>
        <span id="designerButton">Designer</span>
        <span id="errorsButton">Errors &amp; Warnings</span>
    </div>
    

    <div id="tools" style="border:1px solid silver; background-color:#eeeeee;position:absolute;padding:4px;">
        <div id="toolsContainer" style="height:100%">
            <%foreach(var ns in this.Model.ParserNamespaces){ %>
            <h3><a href="#"><%:ns %></a></h3>
            <div>
            <%foreach(var t in this.Model.Parsers.Where(p => p.Namespace.ToLower() == ns.ToLower()))
{%>
                <div style="padding:2px;margin:2px;" class="tool" name="<%=t%>"><%:Model.GetParserName(t.Name)%>
                    <%if (t is IDesignerInitialization) { %>
                    <div>
                        <ul class="insertoptions" style="display:none">
                            <%foreach(var initializer in ((IDesignerInitialization)t).GetInitializers().OrderBy(c => c))
{%>      
                            <li><a class="initializer" href="#" parser="<%=t.Namespace + ":" + t.Name%>"><%:initializer %></a></li>
                            <%
}%>
                        </ul>
                    </div>
                    <%
}%>
                </div>
            <%} %>
            </div>
            <%} %>
            <h3><a href="#">Properties</a></h3>
            <div>
                <table style="background-color:White;width:100%;" id="parserProperties">
                    
                </table>
            </div>
        </div>
    </div>

</asp:Content>

   
